<template>
  <div>
    <div class="all">
      <div class="left">
        <h5>￥1399</h5>
        <div class="small">限时特惠</div>
        <s class="small">￥1499</s>
      </div>
      <div class="right">
        <p>距结束还剩</p>
        <van-count-down>
          <template>
            <span class="block">{{ 17 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ 24 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ 33 }}</span>
          </template>
        </van-count-down>
      </div>
    </div>
    <h4>荣耀手表GS环球远航</h4>
    <p class="one" @click="showPopup">
      <span class="big">领券</span>
      <span class="red">满50减50</span>
      <span class="red">满10减10</span>
    </p>
    <div class="two">
      <p class="c">
        <span class="big">促销</span>
        <span class="blue">限时特价</span>
        <span class="black">限时直降100元</span>
      </p>
      <p class="c">
        <span class="blue kong">一站式换新</span>
        <span class="black">以旧换新赢4999元优惠券补贴</span>
      </p>
      <p class="c">
        <span class="blue kong">整点赠好礼</span>
        <span class="blue">积分红包</span>
        <span class="blue">退换货免运费</span>
      </p>
    </div>

    <van-tabbar  active-color="black" class="bar">
      <van-tabbar-item icon="home-o" class="bar" @click="fun"
        >首页</van-tabbar-item
      >

      <van-tabbar-item icon="service-o">客服</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
      <van-button type="default" class="le"  @click="fun5">加入购物车</van-button>
      <van-button type="info" class="rig" to="/surelist">立即购买</van-button>
    </van-tabbar>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom">
      <div class="q2">
        <div class="lt">领券</div>
        <van-icon name="cross" />
      </div>
      <div class="q1">
        <div>
          <p class="quan">￥50优惠券</p>
          <p class="zhong">荣耀手表50元优惠券</p>
          <p class="time">有效期：2022-10-23至2022-11-30</p>
        </div>
        <div class="ling">立即领取</div>
      </div>
      <div class="q1">
        <div>
          <p class="quan">￥10优惠券</p>
          <p class="zhong">荣耀手表10元优惠券</p>
          <p class="time">有效期：2022-10-23至2022-11-30</p>
        </div>
        <div class="ling">立即领取</div>
      </div>
      <button class="finish">完成</button>
    </van-popup>
  </div>
</template>

<script>
export default {
 
  methods: {
    fun() {
      this.$router.push("/myhome");
    },
    showPopup() {
      this.show = true;
    },
    fun5(){
      this.$router.push("/cart");
      this.$http({
        url:" http://localhost:3000/cart",
        method:"post",
        data:{
           "sell":'满10减10',
            "src":"https://hshop.honorfile.com/pimages//product/6973316859416/group//800_800_B6D28D2C9A8F27417965AA7C5F90EDFFFBBD36525BDE8A7A.png",
            "name":"荣耀手表 GS3 环球远航",
            "pz":"环球远航",
            "activeO":"一站式换新",
            "activeT":"积分红包",
            "price":"1399",
            "num":"1"
        }
      })
    }
  },
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: rgb(241, 106, 21);
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: rgb(241, 106, 21);
}

.all {
  display: flex;
  margin-top: 2.25rem;
}

.left {
  width: 15.625rem;
  height: 3.25rem;
  background: linear-gradient(to right, rgb(248, 58, 84), rgb(253, 163, 64));
  color: #fff;
  padding-left: 1.25rem;
}

.right {
  float: right;
  width: 7.8125rem;
  text-align: center;
  padding-top: 0.5rem;
  font-size: 12px;
  color: rgb(241, 106, 21);
  background-color: rgb(255, 247, 236);
}

.small {
  font-size: 10px;
}

h4 {
  height: 3.125rem;
  line-height: 3.125rem;
  margin-left: 1rem;
  border-bottom: 0.5px rgba(128, 128, 128, 0.5) solid;
}
.le {
  border-radius: 25px 0 0 25px;
  height: 2.375rem;
  margin-top: 6px;
}
.rig {
  border-radius: 0 25px 25px 0;
  height: 2.375rem;
  margin-top: 6px;
}
.one {
  height: 2.5rem;
  margin-left: 1rem;
  border-bottom: 0.5px rgba(128, 128, 128, 0.5) solid;
  line-height: 2.5rem;
}
.red {
  background-color: rgb(250, 217, 217);
  color: red;
  font-size: 14px;
  margin-left: 10px;
}
.big {
  font-weight: 700;
  margin: 10px 16px 10px 0px;
}
.two {
  height: 5.625rem;
  margin-left: 1rem;
}
.blue {
  padding: 1px 6px 1px 6px;
  color: rgb(51, 118, 217);
  border: 1px solid rgb(51, 118, 217);
  font-size: 14px;
  border-radius: 10px;
  margin: 6px;
}
.kong {
  margin-left: 3.375rem;
}
.c {
  margin: 6px;
}
.black {
  font-size: 14px;
}
.lt {
  font-weight: 700;
  width: 21.375rem;
}
.quan {
  font-weight: 700;
  color: #fc5f28;
}
.zhong {
  font-size: 14px;
}
.time {
  font-size: 14px;
  color: #7b7a79;
}
.q1 {
  width: 21rem;
  height: 6.625rem;
  display: flex;
  border-radius: 8px;
  margin-left: 1.2rem;
  border: .5px solid rgba(137, 136, 136, 0.683);
 align-items: center;
 padding: 1.2rem;
 margin-bottom: 1rem;
 
}
.q2{
  width: 23.4375rem;
  height: 2.875rem;
  display: flex;
  align-items: center;
  padding: 1.2rem;
}
.finish{
  width:21.375rem ;
  height: 2.375rem;
  border-radius: 20px;
  margin-left: 1rem;
  border: none;
  background-color: rgb(1, 83, 247);
  color: #fff;
  margin-bottom: .5rem;
}
.ling{
  width: 4.4375rem;
  text-align: center;
  background-color:#fc5f28 ;
  color: #fff;
}

</style>